<template>
 <div class="graphitizing">
   <div class="card-table">
      <!-- <card-uploading :show="uploading" :succeed="succeed"><span style="font-size:14px;">{{uploadText}}</span></card-uploading> -->
      <el-dialog @close="dialogClose()" title="新增装炉信息" append-to-body :modal-append-to-body="true" width="800px" :visible.sync="dialogUpload">
        <el-form class="addForm" :rules="rules1" size="small" ref="form1" :model="form" label-width="110px">
            <!-- <el-form-item class="isTow" label="单双炉" prop=" ">
              <el-radio-group v-model="form.isTwoStove">
                <el-radio-button :label="false">单炉</el-radio-button>
                <el-radio-button :label="true">双炉</el-radio-button>
              </el-radio-group>
            </el-form-item> -->
            <!-- <template v-if="!form.isTwoStove"> -->
              <el-form-item label="上传Excel">
                <el-upload
                  :before-remove="()=>fileList = []"
                  class="upload-demo"
                  :file-list="fileList"
                  :before-upload="beforeUpload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-change="handleChange"
                  accept="  .xlsx"
                  :limit="1"
                  :on-exceed="onExceed"
                  :auto-upload="false">
                  <el-button slot="trigger"  size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
        </el-form>
          <span slot="footer">
            <el-button  v-loading="loading" type="primary" @click="submit">确 定</el-button>
            <el-button type="" @click="resetForm('form1')">取 消</el-button>
          </span>
      </el-dialog>
      <!-- 第二次上传====== -->
      <div>
      <el-button style="margin-bottom:24px;" type="primary" icon="el-icon-document-add" @click="inStove()">新 增</el-button>
      <el-button style="float:right;margin-bottom:24px;margin-right:12px;" type="primary" ><a style="color:#fff;" href="http://101.42.233.226:9000/template/石墨化装炉报告单.xlsx">模板下载</a></el-button>
      </div>
        <el-table :header-cell-style="getRowClass" :data="tableData" style="width: 100%">
          <el-table-column
            header-align="center"
            align="center"
            prop="prop"
            type="index"
            label="编号" >
          </el-table-column>
          <el-table-column label="炉号" align="center">
            <template slot-scope="{row}">
              <span>{{row.stove.stoveCode||'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="总炉数" align="center">
            <template slot-scope="{row}">
              <span>{{row.stove.electric.totalStoveNum||'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="总重" align="center">
            <template slot-scope="{row}">
              <span>{{row.isTwoStove?row.aStove.totalWeight+row.bStove.totalWeight:row.stove.totalWeight}}</span>
            </template>
          </el-table-column>
          <el-table-column label="总支数" align="center">
            <template slot-scope="{row}">
              <span>{{row.isTwoStove?row.aStove.totalNumber+row.bStove.totalNumber:row.stove.totalNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="送电时间" align="center" min-width="155">
            <template slot-scope="{row}">
              <span>{{row.isTwoStove?row.aStove.electric.startElectricTime:row.stove.electric.startElectricTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="停电时间" align="center" min-width="155">
            <template slot-scope="{row}">
              <span>{{row.isTwoStove?row.aStove.electric.stopElectricTime:row.stove.electric.stopElectricTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="EXcel下载" align="center">
            <template slot-scope="{row}">
              <el-link target="_blank" class="link-padding" :href="row.stove.upLoadAddress" type="primary">
                <svg-icon style="width:30px;height:30px;" iconClass="excel"></svg-icon>
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="图片下载" align="center">
            <template slot-scope="{row}">
              <el-link target="_blank" class="link-padding" :href="row.stove.pictureAddress" type="primary">
                <svg-icon style="width:30px;height:30px;" iconClass="imge"></svg-icon>
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="{row}">
              <div style="display:flex;justify-content: space-between;">
              <el-upload
                class="upload-demo"
                :show-file-list="false"
                :before-upload="beforeUpload"
                :on-change="(file,fileList) => {handlePictrueChange(file,fileList,row)}"
                action="https://jsonplaceholder.typicode.com/posts/"
                :limit="1"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">上传图片</el-button>
              </el-upload>
              <el-button @click="deleteOne(row._id)" size="small" type="danger">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
   </div>
 </div>
</template>

<script>
import { graphiteReportGet, graphiteReportDelete2, graphiteReportExcelCreate, graphiteReportUpdate2, minioUpload } from '@/api/process.js'
import { nomalPages } from '@/mixin'
// import cardUploading from '@/components/uploading.vue'
export default {
  name: '',
  components: {
    // cardUploading
  },
  mixins: [nomalPages],
  data () {
    return {
      loading: false,
      form: {
        isTwoStove: false,
        aStove: {},
        bStove: {},
        stove: {}
      },
      fileList: [],
      fileListA: [],
      fileListB: [],
      dialogUpload: false,
      dialogDetial: false,
      uploading: false,
      succeed: false,
      uploadText: '正在上传..',
      tableData: [],
      rules1: {
        startTime: [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }],
        aStoveCode: [{ required: true, message: '请输入A炉号', trigger: 'blur' }],
        bStoveCode: [{ required: true, message: '请输入B炉号', trigger: 'blur' }],
        stoveCode: [{ required: true, message: '请输入单炉炉号', trigger: 'blur' }]
      },
      rules2: {
        stopTime: [
          { required: true, message: '请输入开始送电时间', trigger: 'blur' }
        ],
        startTime: [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }],
        aStoveCode: [{ required: true, message: '请输入A炉号', trigger: 'blur' }],
        bStoveCode: [{ required: true, message: '请输入B炉号', trigger: 'blur' }],
        stoveCode: [{ required: true, message: '请输入单炉炉号', trigger: 'blur' }],
        'stopElectric.aStageTime.startTime2': [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }],
        'stopElectric.aStageTime.startTime1': [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }],
        'stopElectric.aStageTime.stopTime1': [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }],
        'stopElectric.aStageTime.stopTime2': [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }],
        'stopElectric.bStageTime.startTime2': [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }],
        'stopElectric.bStageTime.startTime1': [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }],
        'stopElectric.bStageTime.stopTime1': [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }],
        'stopElectric.bStageTime.stopTime2': [{ required: true, message: '请输入开始送电时间', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    inStove () {
      this.dialogUpload = true
    },

    showDetial (row) {
      this.dialogDetial = true
      this.form = JSON.parse(JSON.stringify(row))
    },
    getAllData () {
      const params = {
        pageSize: this.pageSize,
        currPage: this.currentPage,
        edition: 2
      }
      graphiteReportGet(params).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.tableData = res.data.data.pageData
          this.total = res.data.data.total
        }
      })
    },
    beforeFileListChange (file, fileList, fileName) {
      console.log(file)
      const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      const fileSize = Number(file.size / 1024 / 1024)
      console.log('上传文件大小为 ', fileSize + ' MB')
      console.log('上传文件类型为 ', fileType)
      if (fileSize > 2) {
        this[fileName] = fileList.slice(0, 0)
        this.$message('上传文件不能超过2MB')
      } else {
        if (fileType === 'xlsx') {
          this[fileName] = fileList.slice(-1)
        } else {
          this.$message.warning('请上传正确Excel文件')
          this[fileName] = fileList.slice(0, 0)
        }
        // console.log(this[fileName])
      }
    },
    beforeUpload (file) {
    },
    // 上传图片
    handlePictrueChange (file, fileList, row) {
      const params = {
        bucketName: 'reportpicture'
      }
      console.log(row)
      var formdata = new FormData()
      formdata.append('file', file.raw)
      minioUpload(params, formdata).then(res => {
        if (res.data.code === 200) {
          const payload = {
            ...row
          }
          payload.stove.pictureAddress = res.data.data
          var formData2 = new FormData()
          formData2.append('form', JSON.stringify(payload))
          graphiteReportUpdate2(formData2).then(res => {
            if (res.data.code === 200) {
              this.$message.success('上传成功')
              this.getAllData()
            } else {
              this.$message.warning(res.data.message)
            }
          })
        } else {
          this.$message.warning(res.data.message)
        }
      })
    },
    handleChange (file, fileList) {
      this.beforeFileListChange(file, fileList, 'fileList')
    },
    handleChangeA (file, fileList) {
      // console.log(file, fileList)
      this.beforeFileListChange(file, fileList, 'fileListA')
    },
    handleChangeB (file, fileList) {
      // console.log(file, fileList)
      this.beforeFileListChange(file, fileList, 'fileListB')
    },
    deleteOne (_id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        graphiteReportDelete2(_id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAllData()
          } else {
            this.$message({
              type: 'warging',
              message: res.data.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onExceed () {
      this.$message({
        message: '已选择文件，不可上传多个文件'
      })
    },
    submit () {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          var formdata = new FormData()
          const file = this.fileList[0]
          const fileA = this.fileListA[0]
          const fileB = this.fileListB[0]
          if (this.form.isTwoStove) {
            if (fileA && fileB) {
              formdata.append('file', this.fileListA[0].raw)
              formdata.append('file', this.fileListB[0].raw)
            } else {
              this.$message.warning('请先上传两炉Excel文件再提交')
              return
            }
          } else {
            if (file) {
              formdata.append('file', this.fileList[0].raw)
            } else {
              this.$message.warning('请先上传Excel文件再提交')
              return
            }
          }
          this.loading = true
          formdata.append('form', JSON.stringify(this.form))
          console.log(formdata.getAll('file'))
          const params = {
            edition: 2
          }
          graphiteReportExcelCreate(formdata, params).then(res => {
            if (res.data.code === 200) {
              this.$message.success('上传成功')
              this.getAllData()
              this.dialogUpload = false
            } else {
              this.$message.warning(res.data.message)
            }
            this.loading = false
            this.dialogUpload = false
          }).catch(error => {
            this.loading = false
            console.log(error)
            this.dialogUpload = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    dialogClose () {
      this.form = this.$options.data().form
      this.fileList = []
      this.fileListA = []
      this.fileListB = []
      if (this.$refs.form1) {
        this.$refs.form1.resetFields()
      }
      if (this.$refs.form2) {
        this.$refs.form2.resetFields()
      }
    },
    resetForm (formName) {
      this.dialogUpload = false
      this.dialogUploadThen = false
      this.form = this.$options.data().form
      this.fileList = []
      this.fileListA = []
      this.fileListB = []
      this.$refs[formName].resetFields()
    }

  }
}
</script>

<style  scoped>
.card-search{
  padding-bottom: 10px;
}
.tablebBtn .el-button{
  padding: 8px 14px;
}
.el-divider {
  margin: 30px 0;
}
.el-link{
  line-height: 1;
  padding-bottom: 12px;
}
.dialogTitle{
  padding: 18px;
  font-size: 18px;
}
.isTow{
    .el-radio-button:first-child .el-radio-button__inner{
    border-radius:2px 0 0 2px;
  }
    .el-radio-button:last-child .el-radio-button__inner{
    border-radius:0 2px 2px 0;
  }
   .is-active .el-radio-button__inner{
    background-color: $primary;
    border-color: $primary;
  }
}
.link-padding{
  padding-bottom: 4px;
}
</style>
<style >
.detialDialog .el-dialog__header{
  padding: 0;
}
.detialDialog {
  padding: 12px;
}
</style>
